<template>
	<Echart :options="options" class="right_top_inner" ref="charts" />
</template>

<script>
import { getdailyDischarge, getgraph } from "@/api/modules/home.js";

import { graphic } from "echarts";
export default {
	props: ["info"],
	data() {
		return {
			options: {},
			pageflag: false,
			timer: null,
			dataX: [
				"2024-05-16",
				"2024-05-17",
				"2024-05-18",
				"2024-05-19",
				"2024-05-20",
				"2024-05-21",
				"2024-05-22",
			],
			dataY1: [73, 17, 30, 23, 56.03, 30.73, 90.73],
			dataY2: [76.73, 90, 13, 63, 16.73, 90.73, 10.73],
		};
	},
	watch: {
		info: {
			handler(newVal) {
				if (newVal) {
					this.getData();
				}
			},
			deep: true,
		},
	},
	methods: {
		getData() {
			// this.pageflag =false
			getgraph({ devId: this.info.id, sampleName: "实时功率值" }).then(
				(res) => {
					if (res.code == 200) {
						let xData = [];
						let ygList = [];
						let data = res.data;
						for (let index = 0; index < data.length; index++) {
							let element = data[index];
							xData.push(element.date);
							ygList.push(
								element.graphHisDTO ? element.graphHisDTO.value.toFixed(2) : ""
							); //实时有效功率
							// wgList.push(element.pvPVal) //实时无效功率
							// maxygList.push()
							// maxwgList.push()
						}
						this.$nextTick(() => {
							this.init(xData, ygList, this.info.cname);
						});
					} else {
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				}
			);
			// getdailyDischarge({ companyId: this.info.searchId }).then((res) => {
			//   let xData = []
			//   let yData1 = []
			//   let yData2 = []
			//   if (res.code == 200) {
			//     this.countUserNumData = res.data;
			//     for (let index = 0; index < this.countUserNumData.length; index++) {
			//       let element = this.countUserNumData[index];
			//       xData.push(element.date)
			//       yData1.push(element.sampleHisDTO.length > 0 ? element.sampleHisDTO[0]['value41'] : '')
			//       yData2.push(element.sampleHisDTO.length > 0 ? element.sampleHisDTO[0]['value42'] : '')
			//     }
			//   } else {
			//     this.$Message({
			//       text: res.msg,
			//       type: "warning",
			//     });
			//   }
			//   this.$nextTick(() => {
			//     this.init(xData, yData1, yData2)
			//   });
			// })
		},
		//轮询
		init(xData, yData, cname) {
			this.options = {
				legend: {
					x: "center", //可设定图例在左、右、居中
					y: "10px",
					data: ["有功功率"],
					textStyle: {
						fontSize: 12,
						color: "#F1F1F3",
					},
				},
				xAxis: {
					type: "category",
					data: xData,
					boundaryGap: false, // 不留白，从原点开始
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						// show:false,
						lineStyle: {
							color: "rgba(31,99,163,.1)",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				yAxis: {
					name: "单位：MW",
					type: "value",
					nameTextStyle: {
						color: "#fff",
						fontSize: 12,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(31,99,163,.2)",
						},
					},
					axisLine: {
						lineStyle: {
							color: "rgba(31,99,163,.1)",
						},
					},
					axisLabel: {
						color: "#7EB7FD",
						fontWeight: "500",
					},
				},
				tooltip: {
					trigger: "axis",
					backgroundColor: "rgba(0,0,0,.6)",
					borderColor: "rgba(147, 235, 248, .8)",
					textStyle: {
						color: "#FFF",
					},
					formatter: function (params) {
						var result = cname + "<br/>" + params[0].name + "<br/>";
						params.forEach(function (item) {
							result += item.seriesName + ": " + item.value + "MW<br/>";
						});
						return result;
					},
				},
				grid: {
					//布局
					show: true,
					left: "30px",
					right: "30px",
					bottom: "10px",
					top: "48px",
					containLabel: true,
					borderColor: "#1F63A3",
				},
				series: [
					{
						data: yData,
						type: "line",
						symbol: "none",
						itemStyle: {
							color: "#67c23a",
						},
						name: "有功功率",
						areaStyle: {
							//右，下，左，上
							color: new graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: "rgba(70, 166, 255,.7)",
									},
									{
										offset: 1,
										color: "rgba(70, 166, 255,.0)",
									},
								],
								false
							),
						},
					},
				],
			};
		},
	},
};
</script>
<style lang="scss" scoped>
.right_top_inner {
	margin-top: -8px;
}
</style>
